/**
 * Created by douxin on 23/09/2016.
 */

import React from 'react';
import { getTradeAmount, getPaymentAmount } from './StatisticService';

class TradeBasicContainer extends React.Component {

    render() {
        const tradeAmount = getTradeAmount(this.props.data);
        const paymentAmount = getPaymentAmount(this.props.data);
        let rate = 0;
        if (tradeAmount > 0) {
            rate = (paymentAmount / tradeAmount * 100).toFixed(2)
        }

        return (
            <div className="col-sm-12 col-md-12 col-lg-12 no-padding">
                <div className="panel panel-grey-blue">
                    <div className="panel-body">
                        <p className="dashboard-title">{this.props.merchant.name}实时交易概况</p>
                        <div className="col-sm-12 col-md-12 col-lg-12">
                            <p className="trade-amount-container">
                                <span className="trade-amount-title">¥</span>
                                <span className="trade-amount-price">{tradeAmount}</span>
                                <span className="trade-amount-label"><strong>下单总金额</strong></span>
                            </p>
                        </div>
                        <div className="col-sm-12 col-md-12 col-lg-12">
                            <div className="col-sm-12 col-md-6 col-lg-6">
                                <p className="payment-amount-container">
                                    <span className="payment-amount-label">支付金额：¥{paymentAmount}</span>
                                </p>
                            </div>
                            <div className="col-sm-12 col-md-6 col-lg-6">
                                <p className="payment-amount-container">
                                    <span className="payment-amount-label">支付转化率：{rate}%</span>
                                </p>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        );
    }

}

TradeBasicContainer.propTypes = {
    data: React.PropTypes.array,
    merchant: React.PropTypes.object
};

export default TradeBasicContainer;